<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农场 - 现代购物体验</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1E293B',
                        light: '#F8FAFC',
                        accent: '#F59E0B'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-all;
            }
            .btn-secondary {
                @apply bg-secondary text-white px-4 py-2 rounded-md hover:bg-secondary/90 transition-all;
            }
            .btn-accent {
                @apply bg-accent text-white px-4 py-2 rounded-md hover:bg-accent/90 transition-all;
            }
            .text-balance {
                text-wrap: balance;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .category-active {
                @apply bg-primary text-white;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-dark antialiased">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <a href="#" class="flex items-center space-x-2">
                    <i class="fa fa-shopping-bag text-primary text-2xl"></i>
                    <span class="font-bold text-xl">农场</span>
                </a>
                
                <!-- 导航链接 - 桌面版 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="font-medium hover:text-primary transition-colors">首页</a>
                    <a href="#" class="font-medium hover:text-primary transition-colors">热卖商品</a>
                    <a href="#" class="font-medium hover:text-primary transition-colors">关于我们</a>
                </nav>
                
                <!-- 搜索框 -->
                <div class="hidden md:flex items-center relative flex-1 max-w-md mx-8 group">
                    <input type="text" placeholder="搜索商品..." class="w-full py-2 px-4 pr-10 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all group-hover:border-primary/30">
                    <button class="absolute right-3 text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
                
                <!-- 用户功能区 -->
                <div class="flex items-center space-x-4">
                    <button id="cartBtn" class="relative p-2 hover:text-primary transition-colors">
                        <i class="fa fa-shopping-cart text-xl"></i>
                        <span id="cartCount" class="absolute -top-1 -right-1 bg-secondary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center transition-all animate-pulse">0</span>
                    </button>
                    <button id="userBtn" class="p-2 hover:text-primary transition-colors">
                        <i class="fa fa-user text-xl"></i>
                    </button>
                    <!-- 移动端菜单按钮 -->
                    <button id="mobileMenuBtn" class="md:hidden p-2 hover:text-primary transition-colors">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
            
            <!-- 移动端搜索框 -->
            <div class="md:hidden pb-4">
                <div class="relative">
                    <input type="text" placeholder="搜索商品..." class="w-full py-2 px-4 pr-10 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all">
                    <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobileMenu" class="md:hidden hidden bg-white border-t animate-fadeIn">
            <div class="container mx-auto px-4 py-3 space-y-3">
                <a href="#" class="block py-2 font-medium hover:text-primary transition-colors">首页</a>
                <a href="#" class="block py-2 font-medium hover:text-primary transition-colors">热卖商品</a>
                <a href="#" class="block py-2 font-medium hover:text-primary transition-colors">关于我们</a>
                
                <!-- 移动端分类菜单 -->
                <div class="pt-2 border-t border-gray-100">
                    <p class="font-medium mb-2">商品分类</p>
                    <div class="grid grid-cols-2 gap-2">
                        <button class="category-btn py-2 px-3 rounded-md border border-gray-200 hover:border-primary hover:text-primary transition-colors" data-category="all">全部商品</button>
                        <button class="category-btn py-2 px-3 rounded-md border border-gray-200 hover:border-primary hover:text-primary transition-colors" data-category="电子产品">电子产品</button>
                        <button class="category-btn py-2 px-3 rounded-md border border-gray-200 hover:border-primary hover:text-primary transition-colors" data-category="服装鞋帽">服装鞋帽</button>
                        <button class="category-btn py-2 px-3 rounded-md border border-gray-200 hover:border-primary hover:text-primary transition-colors" data-category="家居用品">家居用品</button>
                        <button class="category-btn py-2 px-3 rounded-md border border-gray-200 hover:border-primary hover:text-primary transition-colors" data-category="图书音像">图书音像</button>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="pt-16">
        <!-- 英雄区 -->
        <section class="bg-gradient-to-r from-primary/90 to-primary text-white overflow-hidden">
            <div class="container mx-auto px-4 py-16 md:py-16">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-8 md:mb-0 relative z-10">
                        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 leading-tight animate-slideInLeft">
                            精选全球好物
                        </h1>
                        <p class="text-lg md:text-xl mb-8 text-white/90 max-w-lg text-balance">
                            发现优质商品，简单快捷购物体验
                        </p>
                        <div class="flex flex-col sm:flex-row gap-4">
                            <button class="btn-secondary hover:shadow-lg transform hover:-translate-y-0.5 transition-all">
                                立即选购
                            </button>
                            <button class="bg-white text-primary px-4 py-2 rounded-md hover:bg-gray-100 transition-all hover:shadow-md">
                                了解更多
                            </button>
                        </div>
                        
                        <!-- 信任标识 -->
                        <div class="mt-10 flex items-center space-x-6">
                            <div class="flex items-center text-white/80">
                                <i class="fa fa-truck mr-2"></i>
                                <span class="text-sm">次日送达</span>
                            </div>
                            <div class="flex items-center text-white/80">
                                <i class="fa fa-shield mr-2"></i>
                                <span class="text-sm">正品保障</span>
                            </div>
                            <div class="flex items-center text-white/80">
                                <i class="fa fa-refresh mr-2"></i>
                                <span class="text-sm">7天无理由</span>
                            </div>
                        </div>
                    </div>
                    <div class="md:w-1/2 relative">
                        <div class="absolute -right-10 -top-10 w-40 h-40 bg-white/10 rounded-full blur-3xl"></div>
                        <div class="absolute -left-10 -bottom-10 w-40 h-40 bg-accent/20 rounded-full blur-3xl"></div>
                        <img src="./static/products/600x400.jpg" alt="精选商品展示" class="rounded-lg shadow-xl w-full h-auto object-cover transform hover:scale-[1.02] transition-transform duration-500 relative z-10">
                    </div>
                </div>
            </div>
        </section>

        <!-- 分类导航 - 桌面版 -->
        <section class="hidden md:block bg-white shadow-sm sticky top-16 z-40">
            <div class="container mx-auto px-4">
                <div class="flex overflow-x-auto scrollbar-hide py-3 space-x-2">
                    <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full bg-gray-100 hover:bg-primary/10 transition-colors category-active" data-category="all">
                        全部商品
                    </button>
                    <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full bg-gray-100 hover:bg-primary/10 transition-colors" data-category="电子产品">
                        电子产品
                    </button>
                    <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full bg-gray-100 hover:bg-primary/10 transition-colors" data-category="服装鞋帽">
                        服装鞋帽
                    </button>
                    <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full bg-gray-100 hover:bg-primary/10 transition-colors" data-category="家居用品">
                        家居用品
                    </button>
                    <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full bg-gray-100 hover:bg-primary/10 transition-colors" data-category="图书音像">
                        图书音像
                    </button>
                    <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full bg-gray-100 hover:bg-primary/10 transition-colors" data-category="new">
                        新品上市
                    </button>
                    <button class="category-btn whitespace-nowrap px-4 py-2 rounded-full bg-gray-100 hover:bg-primary/10 transition-colors" data-category="hot">
                        热销商品
                    </button>
                </div>
            </div>
        </section>

        <!-- 商品展示区 -->
        <section class="py-8 bg-gray-50">
            <div class="container mx-auto px-4">
                <div id="products-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                    <!-- 商品卡片将通过JavaScript动态加载 -->
                </div>
                
                <!-- 加载更多按钮 -->
                <div class="mt-8 text-center">
                    <button id="loadMoreBtn" class="btn-primary group">
                        加载更多 <i class="fa fa-refresh ml-1 group-hover:rotate-180 transition-transform duration-500"></i>
                    </button>
                </div>
            </div>
        </section>      
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white pt-8 pb-8 mt-8 lg:mt-16">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-shopping-bag text-primary text-2xl"></i>
                        <span class="font-bold text-xl">农场</span>
                    </div>
                    <p class="text-gray-400 mb-4">
                        提供优质商品和极简购物体验
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-weixin"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="font-bold text-lg mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">热门商品</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-bold text-lg mb-4">客户服务</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">购物指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">配送信息</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-bold text-lg mb-4">联系我们</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">北京市朝阳区某某街道123号</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone text-primary mr-3"></i>
                            <span class="text-gray-400">400-123-4567</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope text-primary mr-3"></i>
                            <span class="text-gray-400">service@example.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8 text-center text-gray-500 text-sm">
                <p>&copy; 2023 农场. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 登录模态框 -->
    <div id="loginModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center opacity-0 transition-opacity duration-300">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 transform transition-all scale-95 opacity-0" id="loginModalContent">
            <div class="p-6">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-xl font-bold">登录</h3>
                    <button id="closeLoginModal" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                
                <form id="loginForm">
                    <div class="mb-4">
                        <label for="loginEmail" class="block text-gray-700 mb-2">邮箱</label>
                        <input type="email" id="loginEmail" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all" required>
                    </div>
                    
                    <div class="mb-6">
                        <label for="loginPassword" class="block text-gray-700 mb-2">密码</label>
                        <input type="password" id="loginPassword" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all" required>
                        <div class="flex justify-end mt-2">
                            <a href="#" class="text-sm text-primary hover:underline">忘记密码?</a>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn-primary w-full mb-4 hover:shadow-md transition-all">登录</button>
                    
                    <div class="text-center">
                        <span class="text-gray-600">还没有账号? </span>
                        <button type="button" id="switchToRegister" class="text-primary hover:underline">立即注册</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="registerModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden items-center justify-center opacity-0 transition-opacity duration-300">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 transform transition-all scale-95 opacity-0" id="registerModalContent">
            <div class="p-6">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-xl font-bold">注册</h3>
                    <button id="closeRegisterModal" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                
                <form id="registerForm">
                    <div class="mb-4">
                        <label for="registerName" class="block text-gray-700 mb-2">姓名</label>
                        <input type="text" id="registerName" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all" required>
                    </div>
                    
                    <div class="mb-4">
                        <label for="registerEmail" class="block text-gray-700 mb-2">邮箱</label>
                        <input type="email" id="registerEmail" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all" required>
                    </div>
                    
                    <div class="mb-4">
                        <label for="registerPassword" class="block text-gray-700 mb-2">密码</label>
                        <input type="password" id="registerPassword" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all" required>
                    </div>
                    
                    <div class="mb-6">
                        <label for="registerConfirmPassword" class="block text-gray-700 mb-2">确认密码</label>
                        <input type="password" id="registerConfirmPassword" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all" required>
                    </div>
                    
                    <button type="submit" class="btn-primary w-full mb-4 hover:shadow-md transition-all">注册</button>
                    
                    <div class="text-center">
                        <span class="text-gray-600">已有账号? </span>
                        <button type="button" id="switchToLogin" class="text-primary hover:underline">立即登录</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 购物车侧边栏 -->
    <div id="cartSidebar" class="fixed top-0 right-0 h-full w-full sm:w-96 bg-white shadow-2xl z-50 transform translate-x-full transition-transform duration-300">
        <div class="h-full flex flex-col">
            <div class="p-6 border-b">
                <div class="flex justify-between items-center">
                    <h3 class="text-xl font-bold">购物车</h3>
                    <button id="closeCartBtn" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
            
            <div id="cartItems" class="flex-1 overflow-y-auto p-6 space-y-4 scrollbar-hide">
                <!-- 购物车为空时显示 -->
                <div id="emptyCart" class="h-full flex flex-col items-center justify-center text-gray-500">
                    <i class="fa fa-shopping-cart text-5xl mb-4"></i>
                    <p>您的购物车是空的</p>
                    <button id="startShoppingBtn" class="mt-4 btn-primary hover:shadow-md transition-all">
                        开始购物
                    </button>
                </div>
                
                <!-- 购物车商品将通过JavaScript动态加载 -->
            </div>
            
            <div class="p-6 border-t">
                <div class="flex justify-between mb-4">
                    <span class="font-medium">总计</span>
                    <span id="cartTotal" class="font-bold text-xl">¥0.00</span>
                </div>
                <button id="checkoutBtn" class="btn-secondary w-full hover:shadow-md transition-all" disabled>
                    结算
                </button>
            </div>
        </div>
    </div>

    <!-- 遮罩层 -->
    <div id="overlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-40 hidden opacity-0 transition-opacity duration-300"></div>

    <!-- 通知提示 -->
    <div id="toast" class="fixed bottom-6 right-6 bg-dark text-white px-4 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center">
        <i class="fa fa-check-circle text-secondary mr-2"></i>
        <span id="toastMessage"></span>
    </div>

    <!-- 商品快速查看模态框 -->
    <div id="quickViewModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
        <div class="relative bg-white rounded-lg shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-auto m-4 flex flex-col md:flex-row">
            <button id="closeQuickViewBtn" class="absolute top-4 right-4 z-10 bg-white/80 p-2 rounded-full text-gray-600 hover:text-red-500 transition-colors">
                <i class="fa fa-times"></i>
            </button>
            <div id="quickViewImageContainer" class="md:w-1/2 p-6">
                <img id="quickViewImage" src="" alt="商品图片" class="w-full h-auto object-cover rounded-lg">
            </div>
            <div id="quickViewDetails" class="md:w-1/2 p-6 flex flex-col">
                <h3 id="quickViewTitle" class="text-2xl font-bold mb-2"></h3>
                <div id="quickViewCategory" class="text-gray-500 mb-4"></div>
                <div class="flex items-center mb-4">
                    <div id="quickViewRating" class="text-yellow-400 text-sm mr-2"></div>
                    <span id="quickViewReviews" class="text-sm text-gray-500"></span>
                </div>
                <div id="quickViewPrice" class="text-2xl font-bold text-primary mb-6"></div>
                <div id="quickViewDescription" class="text-gray-600 mb-6 flex-1"></div>
                <div class="flex items-center mb-6">
                    <button id="quickViewDecreaseQty" class="p-2 border rounded-l-md hover:bg-gray-100 transition-colors">
                        <i class="fa fa-minus"></i>
                    </button>
                    <input type="number" id="quickViewQty" min="1" value="1" class="w-16 text-center border-y py-2">
                    <button id="quickViewIncreaseQty" class="p-2 border rounded-r-md hover:bg-gray-100 transition-colors">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
                <button id="quickViewAddToCart" class="btn-primary w-full py-3 text-lg">
                    加入购物车
                </button>
                <a id="quickViewProductLink" href="#" class="mt-3 text-center text-primary hover:underline">查看完整商品详情</a>
            </div>
        </div>
    </div>
    <!-- JavaScript -->
    <script>
        // 示例商品数据
        const products = [
            {
                id: 1,
                name: "无线蓝牙耳机",
                price: 299.99,
                originalPrice: 399.99,
                image: "https://picsum.photos/id/1/300/300",
                rating: 4.5,
                reviews: 120,
                category: "电子产品",
                isNew: true,
                dateAdded: new Date(2023, 10, 15)
            },
            {
                id: 2,
                name: "纯棉T恤",
                price: 59.99,
                originalPrice: 89.99,
                image: "https://picsum.photos/id/21/300/300",
                rating: 4.2,
                reviews: 86,
                category: "服装鞋帽",
                isHot: true,
                dateAdded: new Date(2023, 9, 20)
            },
            {
                id: 3,
                name: "智能手表",
                price: 599.99,
                originalPrice: 699.99,
                image: "https://picsum.photos/id/96/300/300",
                rating: 4.8,
                reviews: 215,
                category: "电子产品",
                isHot: true,
                dateAdded: new Date(2023, 10, 5)
            },
            {
                id: 4,
                name: "北欧风格台灯",
                price: 129.99,
                originalPrice: 159.99,
                image: "https://picsum.photos/id/116/300/300",
                rating: 4.3,
                reviews: 54,
                category: "家居用品",
                dateAdded: new Date(2023, 9, 10)
            },
            {
                id: 5,
                name: "机械键盘",
                price: 199.99,
                originalPrice: 249.99,
                image: "https://picsum.photos/id/160/300/300",
                rating: 4.7,
                reviews: 143,
                category: "电子产品",
                dateAdded: new Date(2023, 10, 1)
            },
            {
                id: 6,
                name: "牛仔裤",
                price: 149.99,
                originalPrice: 199.99,
                image: "https://picsum.photos/id/1059/300/300",
                rating: 4.4,
                reviews: 98,
                category: "服装鞋帽",
                dateAdded: new Date(2023, 9, 5)
            },
            {
                id: 7,
                name: "精装图书",
                price: 49.99,
                originalPrice: 69.99,
                image: "https://picsum.photos/id/24/300/300",
                rating: 4.9,
                reviews: 76,
                category: "图书音像",
                isNew: true,
                dateAdded: new Date(2023, 10, 20)
            },
            {
                id: 8,
                name: "便携式充电宝",
                price: 89.99,
                originalPrice: 129.99,
                image: "https://picsum.photos/id/180/300/300",
                rating: 4.1,
                reviews: 102,
                category: "电子产品",
                dateAdded: new Date(2023, 8, 15)
            }
        ];

        // 购物车数据
        let cart = [];
        // 已加载的商品数量
        let loadedProducts = 0;
        // 每次加载的商品数量
        const productsPerLoad = 4;
        // 当前选中的分类
        let currentCategory = 'all';

        // DOM元素
        const productsContainer = document.getElementById('products-container');
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        const userBtn = document.getElementById('userBtn');
        const loginModal = document.getElementById('loginModal');
        const loginModalContent = document.getElementById('loginModalContent');
        const registerModal = document.getElementById('registerModal');
        const registerModalContent = document.getElementById('registerModalContent');
        const closeLoginModal = document.getElementById('closeLoginModal');
        const closeRegisterModal = document.getElementById('closeRegisterModal');
        const switchToRegister = document.getElementById('switchToRegister');
        const switchToLogin = document.getElementById('switchToLogin');
        const loginForm = document.getElementById('loginForm');
        const registerForm = document.getElementById('registerForm');
        const cartBtn = document.getElementById('cartBtn');
        const cartSidebar = document.getElementById('cartSidebar');
        const closeCartBtn = document.getElementById('closeCartBtn');
        const cartItems = document.getElementById('cartItems');
        const emptyCart = document.getElementById('emptyCart');
        const cartCount = document.getElementById('cartCount');
        const cartTotal = document.getElementById('cartTotal');
        const checkoutBtn = document.getElementById('checkoutBtn');
        const startShoppingBtn = document.getElementById('startShoppingBtn');
        const overlay = document.getElementById('overlay');
        const navbar = document.getElementById('navbar');
        const toast = document.getElementById('toast');
        const toastMessage = document.getElementById('toastMessage');
        const categoryButtons = document.querySelectorAll('.category-btn');

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 初始加载部分商品
            loadMoreProducts();
            // 更新购物车UI
            updateCartUI();
            // 设置事件监听器
            setupEventListeners();
        });

        // 设置事件监听器
        function setupEventListeners() {
            // 移动端菜单切换
            mobileMenuBtn.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('animate-fadeIn');
                }
            });

            // 登录/注册模态框切换
            userBtn.addEventListener('click', () => {
                openLoginModal();
            });

            closeLoginModal.addEventListener('click', closeLoginModalFunc);
            closeRegisterModal.addEventListener('click', closeRegisterModalFunc);

            switchToRegister.addEventListener('click', (e) => {
                e.preventDefault();
                closeLoginModalFunc();
                setTimeout(openRegisterModal, 300);
            });

            switchToLogin.addEventListener('click', (e) => {
                e.preventDefault();
                closeRegisterModalFunc();
                setTimeout(openLoginModal, 300);
            });

            // 登录表单提交
            loginForm.addEventListener('submit', (e) => {
                e.preventDefault();
                // 模拟登录请求
                const email = document.getElementById('loginEmail').value;
                const password = document.getElementById('loginPassword').value;
                
                // 调用登录API
                loginUser(email, password);
                
                closeLoginModalFunc();
                loginForm.reset();
                showToast('登录成功');
            });

            // 注册表单提交
            registerForm.addEventListener('submit', (e) => {
                e.preventDefault();
                // 模拟注册请求
                const name = document.getElementById('registerName').value;
                const email = document.getElementById('registerEmail').value;
                const password = document.getElementById('registerPassword').value;
                const confirmPassword = document.getElementById('registerConfirmPassword').value;
                
                if (password !== confirmPassword) {
                    showToast('密码不一致', 'error');
                    return;
                }
                
                // 调用注册API
                registerUser(name, email, password);
                
                closeRegisterModalFunc();
                registerForm.reset();
                showToast('注册成功，请登录');
            });

            // 购物车侧边栏
            cartBtn.addEventListener('click', () => {
                openCartSidebar();
            });

            closeCartBtn.addEventListener('click', closeCartSidebar);
            startShoppingBtn.addEventListener('click', closeCartSidebar);

            // 点击遮罩层关闭所有模态框
            overlay.addEventListener('click', () => {
                closeLoginModalFunc();
                closeRegisterModalFunc();
                closeCartSidebar();
                overlay.classList.add('hidden');
                setTimeout(() => {
                    overlay.classList.remove('opacity-100');
                    overlay.classList.add('opacity-0');
                }, 10);
            });

            // 加载更多按钮
            loadMoreBtn.addEventListener('click', () => {
                loadMoreProducts();
            });

            // 滚动时导航栏效果
            window.addEventListener('scroll', () => {
                if (window.scrollY > 50) {
                    navbar.classList.add('shadow-md');
                    navbar.classList.remove('shadow-sm');
                } else {
                    navbar.classList.remove('shadow-md');
                    navbar.classList.add('shadow-sm');
                }
            });

            // 分类按钮点击事件
            categoryButtons.forEach(button => {
                button.addEventListener('click', () => {
                    // 更新当前分类
                    currentCategory = button.dataset.category;
                    
                    // 更新按钮样式
                    categoryButtons.forEach(btn => btn.classList.remove('category-active'));
                    button.classList.add('category-active');
                    
                    // 重置加载状态并重新加载商品
                    loadedProducts = 0;
                    productsContainer.innerHTML = '';
                    loadMoreProducts();
                    
                    // 关闭移动菜单（如果打开）
                    mobileMenu.classList.add('hidden');
                });
            });

            // 结算按钮
            checkoutBtn.addEventListener('click', () => {
                if (cart.length > 0) {
                    showToast('结算功能即将上线，敬请期待');
                }
            });
        }

        // 根据分类筛选商品
        function filterProducts(items) {
            let filtered = [...items];
            
            // 分类筛选
            if (currentCategory !== 'all') {
                if (currentCategory === 'new') {
                    filtered = filtered.filter(item => item.isNew);
                } else if (currentCategory === 'hot') {
                    filtered = filtered.filter(item => item.isHot);
                } else {
                    filtered = filtered.filter(item => item.category === currentCategory);
                }
            }
            
            // 默认按ID排序
            filtered.sort((a, b) => a.id - b.id);
            
            return filtered;
        }

        // 加载更多商品
        function loadMoreProducts() {
            // 筛选商品
            const filteredProducts = filterProducts(products);
            
            // 显示加载状态
            loadMoreBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...';
            loadMoreBtn.disabled = true;
            loadMoreBtn.classList.add('opacity-70', 'cursor-not-allowed');
            
            // 模拟网络请求延迟
            setTimeout(() => {
                const productsToLoad = filteredProducts.slice(loadedProducts, loadedProducts + productsPerLoad);
                renderProducts(productsToLoad);
                loadedProducts += productsPerLoad;
                
                // 恢复按钮状态
                loadMoreBtn.innerHTML = '加载更多 <i class="fa fa-refresh ml-1 group-hover:rotate-180 transition-transform duration-500"></i>';
                loadMoreBtn.disabled = false;
                loadMoreBtn.classList.remove('opacity-70', 'cursor-not-allowed');
                
                // 如果没有更多商品可加载，隐藏按钮
                if (loadedProducts >= filteredProducts.length) {
                    loadMoreBtn.classList.add('hidden');
                } else {
                    loadMoreBtn.classList.remove('hidden');
                }
            }, 800);
        }

        // 渲染商品列表
        function renderProducts(products) {
            products.forEach(product => {
                const productCard = document.createElement('div');
                productCard.className = 'bg-white rounded-lg overflow-hidden shadow-sm card-hover';
                productCard.innerHTML = `
                    <div class="relative group">
                        <img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute top-2 left-2 flex flex-col gap-2">
                            <span class="bg-secondary text-white text-xs px-2 py-1 rounded">
                                ${Math.round((1 - product.price / product.originalPrice) * 100)}% OFF
                            </span>
                            ${product.isNew ? '<span class="bg-primary text-white text-xs px-2 py-1 rounded">新品</span>' : ''}
                            ${product.isHot ? '<span class="bg-accent text-white text-xs px-2 py-1 rounded">热销</span>' : ''}
                        </div>
                        <div class="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                            <button class="quick-view-btn bg-white text-primary p-2 rounded-full shadow-md transform translate-y-4 group-hover:translate-y-0 transition-transform mr-2" data-id="${product.id}">
                                <i class="fa fa-eye"></i>
                            </button>
                            <button data-id="${product.id}" class="add-to-cart-btn bg-primary text-white p-2 rounded-full shadow-md transform translate-y-4 group-hover:translate-y-0 transition-transform">
                                <i class="fa fa-shopping-cart"></i>
                            </button>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="text-sm text-gray-500 mb-1">${product.category}</div>
                        <h3 class="font-medium mb-2 line-clamp-1">${product.name}</h3>
                        <div class="flex items-center mb-2">
                            <div class="text-yellow-400 text-sm mr-2">
                                ${generateStars(product.rating)}
                            </div>
                            <span class="text-sm text-gray-500">(${product.reviews})</span>
                        </div>
                        <div class="flex items-center justify-between mb-4">
                            <div>
                                <span class="text-primary font-bold">¥${product.price.toFixed(2)}</span>
                                <span class="text-gray-400 text-sm line-through ml-2">¥${product.originalPrice.toFixed(2)}</span>
                            </div>
                        </div>
                        <button data-id="${product.id}" class="add-to-cart-btn w-full py-2 border border-primary text-primary rounded-md hover:bg-primary hover:text-white transition-colors">
                            加入购物车
                        </button>
                    </div>
                `;
                productsContainer.appendChild(productCard);
            });

            // 为加入购物车按钮添加事件监听
            document.querySelectorAll('.add-to-cart-btn:not([data-listener])').forEach(btn => {
                btn.dataset.listener = 'true';
                btn.addEventListener('click', (e) => {
                    const productId = parseInt(e.currentTarget.dataset.id);
                    addToCart(productId);
                });
            });

            // 为快速查看按钮添加事件监听
            document.querySelectorAll('.quick-view-btn:not([data-listener])').forEach(btn => {
                btn.dataset.listener = 'true';
                btn.addEventListener('click', (e) => {
                    const productId = parseInt(e.currentTarget.dataset.id);
                    showProductQuickView(productId);
                });
            });
        }

        // 生成星级评分HTML
        function generateStars(rating) {
            let stars = '';
            const fullStars = Math.floor(rating);
            const hasHalfStar = rating % 1 >= 0.5;
            
            for (let i = 0; i < fullStars; i++) {
                stars += '<i class="fa fa-star"></i>';
            }
            
            if (hasHalfStar) {
                stars += '<i class="fa fa-star-half-o"></i>';
            }
            
            const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
            for (let i = 0; i < emptyStars; i++) {
                stars += '<i class="fa fa-star-o"></i>';
            }
            
            return stars;
        }

        // 添加商品到购物车
        function addToCart(productId) {
            const product = products.find(p => p.id === productId);
            if (!product) return;
            
            // 检查商品是否已在购物车中
            const existingItem = cart.find(item => item.id === productId);
            
            if (existingItem) {
                // 增加数量
                existingItem.quantity++;
            } else {
                // 添加新商品
                cart.push({
                    ...product,
                    quantity: 1
                });
            }
            
            // 更新购物车UI
            updateCartUI();
            showToast(`${product.name} 已添加到购物车`);
        }

        // 更新购物车UI
        function updateCartUI() {
            // 更新购物车数量
            const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
            cartCount.textContent = totalItems;
            
            // 更新购物车列表
            cartItems.innerHTML = '';
            
            if (cart.length === 0) {
                // 显示空购物车状态
                emptyCart.classList.remove('hidden');
                checkoutBtn.disabled = true;
                checkoutBtn.classList.add('opacity-70', 'cursor-not-allowed');
                cartTotal.textContent = '¥0.00';
            } else {
                // 隐藏空购物车状态
                emptyCart.classList.add('hidden');
                checkoutBtn.disabled = false;
                checkoutBtn.classList.remove('opacity-70', 'cursor-not-allowed');
                
                // 添加购物车商品
                cart.forEach(item => {
                    const cartItem = document.createElement('div');
                    cartItem.className = 'flex items-center p-3 border rounded-lg';
                    cartItem.innerHTML = `
                        <img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-cover rounded mr-3">
                        <div class="flex-1 min-w-0">
                            <h4 class="font-medium line-clamp-1">${item.name}</h4>
                            <div class="text-primary font-medium mt-1">¥${item.price.toFixed(2)}</div>
                            <div class="flex items-center mt-2">
                                <button class="decrease-qty p-1 text-gray-500 hover:text-primary" data-id="${item.id}">
                                    <i class="fa fa-minus-circle"></i>
                                </button>
                                <span class="mx-2">${item.quantity}</span>
                                <button class="increase-qty p-1 text-gray-500 hover:text-primary" data-id="${item.id}">
                                    <i class="fa fa-plus-circle"></i>
                                </button>
                            </div>
                        </div>
                        <button class="remove-item text-gray-400 hover:text-red-500 ml-2" data-id="${item.id}">
                            <i class="fa fa-trash"></i>
                        </button>
                    `;
                    cartItems.appendChild(cartItem);
                });
                
                // 添加数量调整事件监听
                document.querySelectorAll('.decrease-qty').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const productId = parseInt(e.currentTarget.dataset.id);
                        decreaseQuantity(productId);
                    });
                });
                
                document.querySelectorAll('.increase-qty').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const productId = parseInt(e.currentTarget.dataset.id);
                        increaseQuantity(productId);
                    });
                });
                
                document.querySelectorAll('.remove-item').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const productId = parseInt(e.currentTarget.dataset.id);
                        removeFromCart(productId);
                    });
                });
                
                // 更新总价
                const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
                cartTotal.textContent = `¥${total.toFixed(2)}`;
            }
        }

        // 减少购物车商品数量
        function decreaseQuantity(productId) {
            const item = cart.find(item => item.id === productId);
            if (item) {
                if (item.quantity > 1) {
                    item.quantity--;
                } else {
                    removeFromCart(productId);
                }
                updateCartUI();
            }
        }

        // 增加购物车商品数量
        function increaseQuantity(productId) {
            const item = cart.find(item => item.id === productId);
            if (item) {
                item.quantity++;
                updateCartUI();
            }
        }

        // 从购物车移除商品
        function removeFromCart(productId) {
            const item = cart.find(item => item.id === productId);
            if (item) {
                cart = cart.filter(item => item.id !== productId);
                updateCartUI();
                showToast(`${item.name} 已从购物车移除`);
            }
        }

        // 显示商品快速查看
        function showProductQuickView(productId) {
            const product = products.find(p => p.id === productId);
            if (product) {
                showToast(`快速查看: ${product.name}`);
                // 这里可以实现快速查看模态框的逻辑
            }
        }

        // 显示通知提示
        function showToast(message, type = 'success') {
            toastMessage.textContent = message;
            
            // 设置图标
            const icon = toast.querySelector('i');
            if (type === 'error') {
                icon.className = 'fa fa-exclamation-circle text-red-500 mr-2';
            } else {
                icon.className = 'fa fa-check-circle text-secondary mr-2';
            }
            
            // 显示提示
            toast.classList.remove('translate-y-20', 'opacity-0');
            toast.classList.add('translate-y-0', 'opacity-100');
            
            // 3秒后隐藏
            setTimeout(() => {
                toast.classList.remove('translate-y-0', 'opacity-100');
                toast.classList.add('translate-y-20', 'opacity-0');
            }, 3000);
        }

        // 打开登录模态框
        function openLoginModal() {
            loginModal.classList.remove('hidden');
            loginModal.classList.add('flex');
            overlay.classList.remove('hidden');
            
            // 触发动画
            setTimeout(() => {
                loginModal.classList.remove('opacity-0');
                loginModal.classList.add('opacity-100');
                loginModalContent.classList.remove('scale-95', 'opacity-0');
                loginModalContent.classList.add('scale-100', 'opacity-100');
                overlay.classList.remove('opacity-0');
                overlay.classList.add('opacity-100');
            }, 10);
        }

        // 关闭登录模态框
        function closeLoginModalFunc() {
            loginModal.classList.remove('opacity-100');
            loginModal.classList.add('opacity-0');
            loginModalContent.classList.remove('scale-100', 'opacity-100');
            loginModalContent.classList.add('scale-95', 'opacity-0');
            
            setTimeout(() => {
                loginModal.classList.remove('flex');
                loginModal.classList.add('hidden');
            }, 300);
        }

        // 打开注册模态框
        function openRegisterModal() {
            registerModal.classList.remove('hidden');
            registerModal.classList.add('flex');
            overlay.classList.remove('hidden');
            
            // 触发动画
            setTimeout(() => {
                registerModal.classList.remove('opacity-0');
                registerModal.classList.add('opacity-100');
                registerModalContent.classList.remove('scale-95', 'opacity-0');
                registerModalContent.classList.add('scale-100', 'opacity-100');
                overlay.classList.remove('opacity-0');
                overlay.classList.add('opacity-100');
            }, 10);
        }

        // 关闭注册模态框
        function closeRegisterModalFunc() {
            registerModal.classList.remove('opacity-100');
            registerModal.classList.add('opacity-0');
            registerModalContent.classList.remove('scale-100', 'opacity-100');
            registerModalContent.classList.add('scale-95', 'opacity-0');
            
            setTimeout(() => {
                registerModal.classList.remove('flex');
                registerModal.classList.add('hidden');
            }, 300);
        }

        // 打开购物车侧边栏
        function openCartSidebar() {
            cartSidebar.classList.remove('translate-x-full');
            overlay.classList.remove('hidden');
            
            setTimeout(() => {
                overlay.classList.remove('opacity-0');
                overlay.classList.add('opacity-100');
            }, 10);
        }

        // 关闭购物车侧边栏
        function closeCartSidebar() {
            cartSidebar.classList.add('translate-x-full');
            overlay.classList.remove('opacity-100');
            overlay.classList.add('opacity-0');
            
            setTimeout(() => {
                overlay.classList.add('hidden');
            }, 300);
        }

        // 模拟登录API
        function loginUser(email, password) {
            // 实际项目中这里会调用后端API
            console.log('登录用户:', { email, password });
        }

        // 模拟注册API
        function registerUser(name, email, password) {
            // 实际项目中这里会调用后端API
            console.log('注册用户:', { name, email, password });
        }
    </script>
</body>
</html>
